﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>home</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/plugin/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="jQueryMsg/css/message.css">

    <style>
        .table td, .table th {
            padding: 0.25rem !important;
        }
        .fixed-table-container tbody td , .fixed-table-container thead th {
            padding: 0px;
        }
    </style>
</head>
<body style="min-width: 555px">
<div class="wrapper">
    <div class="main-header">

        <!--logo-->
        <div class="logo-header">
            <a href="index.html" class="logo">
                教学实训管理系统
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">


                <!--用户管理-->
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li  class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="la la-bell"></i>
                            <span id="messageLen" class="notification" style="display: none"></span>
                        </a>
                        <ul id="dialogueMessage" class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">

                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="userName1"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <a id="resetPass" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> 修改密码</a>
                            <a id="logout" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> Logout</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="sidebar-wrapper">
            <!--左侧导航-->
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>home</p>
                        <!--<span class="badge badge-count">5</span>-->
                    </a>
                </li>
                <li id="1" style="display: none" class="nav-item">
                    <a href="user.html">
                        <i class="la la-table"></i>
                        <p>用户</p>
                        <!--<span class="badge badge-count">14</span>-->
                    </a>
                </li>
                <li id="2" style="display: none" class="nav-item">
                    <a href="role.html">
                        <i class="la la-keyboard-o"></i>
                        <p>角色</p>
                        <!--<span class="badge badge-count">50</span>-->
                    </a>
                </li>
                <li id="3" style="display: none" class="nav-item">
                    <a href="questions.html">
                        <i class="la la-th"></i>
                        <p>留言</p>
                        <!--<span class="badge badge-count">6</span>-->
                    </a>
                </li>
                <li id="4" style="display: none" class="nav-item">
                    <a href="submission.html">
                        <i class="la la-bell"></i>
                        <p>日记记录</p>
                        <!--<span class="badge badge-success">3</span>-->
                    </a>
                </li>
                <li id="5" style="display: none" class="nav-item active">
                    <a href="audit.html">
                        <i class="la la-font"></i>
                        <p>日记审核</p>
                        <span id="diaryLen" class="badge badge-danger"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <!--main-->
    <div class="main-panel">
        <div class="content" style="margin-bottom: 2%">
            <div class="container-fluid">
                <h4 class="page-title">home</h4>
                <!--卡片-->
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-stats card-warning">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <img src="assets/img/管理员.jpg" height="100" width="100" style="border-radius: 100%"/>
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">管理员</p>
                                            <h4 class="card-title">root</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-success">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <img src="assets/img/教师.jpg" height="100" width="100" style="border-radius: 100%"/>
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">优秀老师</p>
                                            <h4 class="card-title">张老师</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-danger">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <img src="assets/img/学生.jpg" height="100" width="100" style="border-radius: 100%"/>
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">优秀学生</p>
                                            <h4 class="card-title">李同学</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-stats card-primary">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-5">
                                        <div class="icon-big text-center">
                                            <img src="assets/img/统计.png" height="100" width="100"/>
                                        </div>
                                    </div>
                                    <div class="col-7 d-flex align-items-center">
                                        <div class="numbers">
                                            <p class="card-category">学生日记优占比</p>
                                            <h4 id="statistics" class="card-title"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">2021年度实训成绩饼图统计</h4>
                            </div>
                            <div id="main" style="height: 400px;" class="card-body">
                                饼图
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">2021年度实训成绩条形图统计</h4>
                            </div>
                            <div id="main1" style="height: 400px;" class="card-body">
                                条形图
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                反馈
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                帮助
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    2021.07.23
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="myModalLabel">操作</h6>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="oldPass">旧密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="oldPass" placeholder="旧密码..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="newPass">新密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="newPass" placeholder="新密码..." autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group has-warning form-inline">
                        <label class="col-sm-3 control-label" for="newPassTwo">确认密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="newPassTwo" placeholder="确认密码..." autocomplete="off">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="setPass" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<!--<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>-->
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="assets/js/echarts.simple.min.js"></script>
<!--<script src="assets/js/plugin/chartist/chartist.min.js"></script>-->
<!--<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>-->
<!--<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>-->
<!--<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>-->
<!--<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>-->
<!--<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>-->
<!--<script src="assets/js/plugin/chart-circle/circles.min.js"></script>-->
<!--<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>-->
<script src="assets/js/ready.min.js"></script>
<script src="jQueryMsg/js/message.js"></script>

<script>
    var token;
    var count;
    $(function () {
        token = sessionStorage.getItem('token')
        getPower()
        dialogueMessage()
        audit();
        $.ajax({
            url: 'http://localhost:8080/oa/t-diary/fraction',
            type: "GET",
            dataType: "json",
            headers: {
                token: "" + token
            },
            success: function (data) {
                if (data.code == 200){
                    count = data.data
                    var a = Number(count[0].fraction)
                    var sum=0;
                    for (var i = 0 ; i < count.length ; i++) {
                        sum += Number(count[i].fraction)
                    }
                    var statistics = Math.round((a/sum)*100)+'%'
                    $('#statistics').html(statistics)
                    chart(count)
                }else if (data.code == 401) {
                    window.location.href = 'login.html'
                }else {
                    $.message({
                        message:data.msg,
                        type:'error'
                    });
                }
            }
        })
    })
   function chart(count) {
       var myChart = echarts.init(document.getElementById('main'));
       option = {
           title : {
               text: '某站点用户访问来源',
               subtext: '纯属虚构',
               x:'center'
           },
           tooltip : {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)"
           },
           legend: {
               orient: 'vertical',
               left: 'left',
               data: ['优','良','差','不及格']
           },
           series : [
               {
                   name: '访问来源',
                   type: 'pie',
                   radius : '55%',
                   center: ['50%', '60%'],
                   data:[
                       {value:count[0].fraction, name:'优'},
                       {value:count[1].fraction, name:'良'},
                       {value:count[2].fraction, name:'差'},
                       {value:count[3].fraction, name:'不及格'},
                   ],
                   itemStyle: {
                       emphasis: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       }
                   }
               }
           ]
       };
       myChart.setOption(option);

       var myChart1 = echarts.init(document.getElementById('main1'));
       option1 = {
           xAxis: {
               type: 'category',
               data: ['优', '良', '差', '不及格']
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               data: [count[0].fraction, count[1].fraction, count[2].fraction, count[3].fraction],
               type: 'bar'
           }]
       };

       myChart1.setOption(option1);
   }
</script>
<script src="power.js"></script>

</html>